<template>
  <a-layout style="min-height: 100vh">
    <a-layout-content style="background-color: #F2F2E6">
      <div style="padding-top: 8vh; padding-bottom: 4vh;">
        <v-card-title class="text-center justify-center py-6">
          <h1 class="font-weight-bold text-h2 basil--text">
            Creativity Depository
          </h1>
        </v-card-title>
        <v-card-subtitle class="text-center justify-center">
          <h2 class="font-weight-bold text-h3 basil--text">
            创意仓库
          </h2>
        </v-card-subtitle>
        <v-tabs
          v-model="tab"
          background-color="transparent"
          color="basil"
          grow
        >
          <v-tab
            v-for="item in items"
            :key="item"
            style="font-family: 等线,serif; font-weight: bolder"
          >
            {{ item }}
          </v-tab>

        </v-tabs>

        <v-tabs-items v-model="tab">
          <v-tab-item>
            <v-card color="basil" flat>
              <v-card-text>
                <a-spin tip="Loading..." :spinning="searchLoading">
                  <a-list item-layout="vertical" size="large" :pagination="pagination_U" :data-source="listUpload">
                    <div slot="footer"><b>MindFall</b> Creativity Depository —— 已发布创意</div>
                    <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
                      <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                        <v-row>
                          <v-col cols="9" style="padding: 0">
                            <v-row style="padding-left: 10px; margin-bottom: 5px">
                              <h1 class="font-weight-bold text-sm-h6 basil--text">
                                {{item.name}}
                              </h1>
                              <v-spacer>
                              </v-spacer>
                              <span style="font-size: 15px; font-weight: bolder; color: #89B8CA">
                                <a-icon type="calendar" />
                                创建时间：{{ item.createTime }}&emsp;
                                <a-icon type="history" />
                                当前状态：{{ item.statement }}&emsp;
                              </span>
                              <a-dropdown>

                                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="font-size: 15px; font-weight: bolder">
                                  操作 <a-icon type="down" />
                                </a>
                                <a-menu slot="overlay" disabled="true">
                                  <a-menu-item @click="showSecrete_a(item)">
                                    <a-icon type="team" style="color: #89B8CA"/>
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #89B8CA" >设为私密</span>
                                  </a-menu-item>
                                  <a-menu-item @click="edit(item)">
                                    <a-icon type="edit" style="color: #d8caaf" />
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #d8caaf" >编辑创意</span>
                                  </a-menu-item>
                                  <a-menu-item @click="showFakeDelete(item)">
                                    <a-icon type="delete" style="color: #a27e7e" />
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #a27e7e" >删除创意</span>
                                  </a-menu-item>
                                </a-menu>
                              </a-dropdown>
                            </v-row>


                            <a-steps size="small" :current="4" style="font-family: 等线; margin-bottom: 20px; margin-top: 20px">
                              <a-step>
                                <template #icon>
                                  <a-icon type="check-circle"/>
                                </template>
                                <template #title>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意描述
                                  </span>
                                </template>
                              </a-step>
                              <a-step>
                                <template #icon v-if="item.sketch === '{}'">
                                  <a-icon type="info-circle" />
                                </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.sketch === '{}'">
                                  <span>创意草图</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意草图</span>
                                </template>
                              </a-step>
                              <a-step>
                                <template #icon v-if="item.picture === '{}'">
                                  <a-icon type="info-circle" />
                                </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.picture === '{}'">
                                  <span>创意渲染图</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意渲染图</span>
                                </template>
                              </a-step>
                              <a-step>
                                <<template #icon v-if="item.video === ''">
                                <a-icon type="info-circle" />
                              </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.video === ''">
                                  <span>创意视频</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意视频</span>
                                </template>
                              </a-step>
                            </a-steps>

                            <p style="font-family: 等线; font-weight: bold; font-size: 14px">{{item.detail.substring(0,300)}}
                              <span v-show="item.detail.length > 300">…</span>
                            </p>
                            <a-icon type="eye" />
                            {{item.view}}&emsp;
                            <a-icon type="star" />
                            {{item.collections}}&emsp;
                            <a-icon type="message" />
                            {{item.comments}}
                            &emsp;


                          </v-col>
                          <v-col cols="2">
                            <div style="text-align: center; ">
                              <img
                                style="margin-left: 40px; max-height: 30vh; max-width: 18vw; "
                                alt=""
                                :src="getPicture(item)"
                              />
                            </div>
                          </v-col>
                        </v-row>
                      </v-card-text>
                    </a-list-item>
                  </a-list>
                </a-spin>
              </v-card-text>
            </v-card>
          </v-tab-item>
          <v-tab-item>
            <v-card color="basil" flat>
              <v-card-text>
                <a-spin tip="Loading..." :spinning="searchLoading">
                  <a-list item-layout="vertical" size="large" :pagination="pagination_S" :data-source="listSecret">
                    <div slot="footer"><b>MindFall</b> Creativity Depository —— 未发布创意</div>
                    <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
                      <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                        <v-row>
                          <v-col cols="9" style="padding: 0">
                            <v-row style="padding-left: 10px; margin-bottom: 5px">
                              <h1 class="font-weight-bold text-sm-h6 basil--text">
                                {{item.name}}
                              </h1>
                              <v-spacer>
                              </v-spacer>
                              <span style="font-size: 15px; font-weight: bolder; color: #89B8CA">

                                <a-icon type="calendar" />
                                创建时间：{{ item.createTime }}&emsp;
                                <a-icon type="history" />
                                当前状态：{{ item.statement }}&emsp;
                              </span>
                              <a-dropdown>

                                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="font-size: 15px; font-weight: bolder">
                                  操作 <a-icon type="down" />
                                </a>
                                <a-menu slot="overlay" disabled="true">
                                  <a-menu-item @click="showUpload(item)">
                                    <a-icon type="upload" style="color: #89B8CA" />
                                    <span style="font-family: 等线; font-weight: bolder; color: #89B8CA" >发布创意</span>
                                  </a-menu-item>
                                  <a-menu-item @click="edit(item)">
                                    <a-icon type="edit" style="color: #d8caaf" />
                                    <span style="font-family: 等线; font-weight: bolder; color: #d8caaf" >编辑创意</span>
                                  </a-menu-item>
                                  <a-menu-item @click="showFakeDelete(item)">
                                    <a-icon type="delete" style="color: #a27e7e" />
                                    <span style="font-family: 等线; font-weight: bolder; color: #a27e7e" >删除创意</span>
                                  </a-menu-item>
                                </a-menu>
                              </a-dropdown>
                            </v-row>


                            <a-steps size="small" :current="4" style="font-family: 等线; margin-bottom: 20px; margin-top: 20px">
                              <a-step>
                                <template #icon>
                                  <a-icon type="check-circle"/>
                                </template>
                                <template #title>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意描述
                                  </span>
                                </template>
                              </a-step>
                              <a-step>
                                <template #icon v-if="item.sketch === '{}'">
                                  <a-icon type="info-circle" />
                                </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.sketch === '{}'">
                                  <span>创意草图</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意草图</span>
                                </template>
                              </a-step>
                              <a-step>
                                <template #icon v-if="item.picture === '{}'">
                                  <a-icon type="info-circle" />
                                </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.picture === '{}'">
                                  <span>创意渲染图</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意渲染图</span>
                                </template>
                              </a-step>
                              <a-step>
                                <<template #icon v-if="item.video === ''">
                                <a-icon type="info-circle" />
                              </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.video === ''">
                                  <span>创意视频</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意视频</span>
                                </template>
                              </a-step>
                            </a-steps>

                            <p style="font-family: 等线; font-weight: bold; font-size: 14px">{{item.detail.substring(0,300)}}
                              <span v-show="item.detail.length > 300">…</span>
                            </p>


                          </v-col>
                          <v-col cols="2">
                            <div style="text-align: center">
                              <img
                                style="margin-left: 40px; max-height: 30vh; max-width: 18vw"
                                alt=""
                                :src="getPicture(item)"
                              />
                            </div>
                          </v-col>
                        </v-row>
                      </v-card-text>
                    </a-list-item>
                  </a-list>
                </a-spin>
              </v-card-text>
            </v-card>
          </v-tab-item>
          <v-tab-item>
            <v-card color="basil" flat>
              <v-card-text>
                <a-spin tip="Loading..." :spinning="searchLoading">
                  <a-list item-layout="vertical" size="large" :pagination="pagination_R" :data-source="listRubbish">
                    <div slot="footer"><b>MindFall</b> Creativity Depository —— 创意回收站</div>
                    <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
                      <v-card-text style="padding-left: 20px; padding-bottom: 0; padding-top: 30px">
                        <v-row>
                          <v-col cols="9" style="padding: 0">
                            <v-row style="padding-left: 10px; margin-bottom: 5px">
                              <h1 class="font-weight-bold text-sm-h6 basil--text">
                                {{item.name}}
                              </h1>
                              <v-spacer>
                              </v-spacer>
                              <span style="font-size: 15px; font-weight: bolder; color: #89B8CA">

                                <a-icon type="calendar" />
                                创建时间：{{ item.createTime }}&emsp;
                                <a-icon type="history" />
                                当前状态：{{ item.statement }}&emsp;
                              </span>
                              <a-dropdown>

                                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="font-size: 15px; font-weight: bolder">
                                  操作 <a-icon type="down" />
                                </a>
                                <a-menu slot="overlay" disabled="true">
                                  <a-menu-item @click="showSecrete_b(item)">
                                    <a-icon type="undo" style="color: #89B8CA"/>
                                    <span style="font-family: 等线; font-weight: bolder; color: #89B8CA" >恢复创意</span>
                                  </a-menu-item>
                                  <a-menu-item @click="showRealDelete(item)">
                                    <a-icon type="scissor" style="color: #a27e7e" />
                                    <span style="font-family: 等线; font-weight: bolder; color: #a27e7e" >彻底删除</span>
                                  </a-menu-item>
                                </a-menu>
                              </a-dropdown>
                            </v-row>


                            <a-steps size="small" :current="4" style="font-family: 等线; margin-bottom: 20px; margin-top: 20px">
                              <a-step>
                                <template #icon>
                                  <a-icon type="check-circle"/>
                                </template>
                                <template #title>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意描述
                                  </span>
                                </template>
                              </a-step>
                              <a-step>
                                <template #icon v-if="item.sketch === '{}'">
                                  <a-icon type="info-circle" />
                                </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.sketch === '{}'">
                                  <span>创意草图</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意草图</span>
                                </template>
                              </a-step>
                              <a-step>
                                <template #icon v-if="item.picture === '{}'">
                                  <a-icon type="info-circle" />
                                </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.picture === '{}'">
                                  <span>创意渲染图</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意渲染图</span>
                                </template>
                              </a-step>
                              <a-step>
                                <<template #icon v-if="item.video === ''">
                                <a-icon type="info-circle" />
                              </template>
                                <template #icon v-else>
                                  <a-icon type="check-circle"/>
                                </template>

                                <template #title v-if="item.video === ''">
                                  <span>创意视频</span>
                                </template>
                                <template #title v-else>
                                  <span style="color: #2C2E2D; font-weight: bolder;">创意视频</span>
                                </template>
                              </a-step>
                            </a-steps>

                            <p style="font-family: 等线; font-weight: bold; font-size: 14px">{{item.detail.substring(0,300)}}
                              <span v-show="item.detail.length > 300">…</span>
                            </p>


                          </v-col>
                          <v-col cols="2">
                            <div style="text-align: center">
                              <img
                                style="margin-left: 40px; max-height: 30vh; max-width: 18vw"
                                alt=""
                                :src="getPicture(item)"
                              />
                            </div>
                          </v-col>
                        </v-row>
                      </v-card-text>
                    </a-list-item>
                  </a-list>
                </a-spin>
              </v-card-text>
            </v-card>
          </v-tab-item>
        </v-tabs-items>
      </div>

      <a-modal
        :visible="dialog"
        title="操作确认"
        max-width="400"
        :closable="false"
        @cancel="dialog = false"
        @ok="handle"
      >
        <p style="font-family: '微软雅黑 Light',serif; font-weight: bold">
          <a-icon type="info-circle" style="color: #e28300"/>
          {{text}}
        </p>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request";

  export default {
    name: "Creativity",
    created() {
      this.load()
    },
    computed:{

    },
    data () {
      return {
        searchLoading: false,
        tab: null,
        items: [
          '已发布创意', '未发布创意', '回收站',
        ],
        dialog: false,
        listUpload: [],
        listSecret: [],
        text: '',
        toHandleEvent: '',
        creativeObj: {},
        listRubbish: [],
        pagination_U: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        },
        pagination_S: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        },
        pagination_R: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        },
      }
    },
    methods:{
      getPicture(item){
        if (item.picture !== '{}')
          return JSON.parse(item.picture).response
        else if (item.sketch !== '{}')
          return JSON.parse(item.sketch).response
        else
          return 'https://mindfall.cn/systemImg/404.png'
      },
      async load(){
        this.listUpload = []
        this.listRubbish = []
        this.listSecret = []
        this.searchLoading = true
        await request.get('/creative/getMine').then(res => {
          if (res.code === '200'){
            this.searchLoading = false
            for (let i = 0; i < res.data.length; i++){
              if (res.data[i].statement === '待审核' || res.data[i].statement === '已发布')
                this.listUpload.push(res.data[i])
              else if (res.data[i].statement === '未发布')
                this.listSecret.push(res.data[i])
              else if (res.data[i].statement === '回收')
                this.listRubbish.push(res.data[i])

            }
          }
        })
      },
      successTip(msg){
        this.$message.success({ content: msg,
          icon: () =>
            this.$createElement("a-icon", {
              props: {
                type: "smile"
              }
            }),
          top: '100px',
          duration: 1
        })
      },
      showUpload(item){
        this.text = '确定发布该创意吗？请确保不会有与该创意相关的专利受到影响。'
        this.toHandleEvent = 'upload'
        this.creativeObj = item
        this.dialog = true
      },
      upload(item){
        item.statement = '待审核'
        request.post('/creative/manageCreative', item).then(res => {
          if (res.code === '200'){
            this.successTip('创意发布成功')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      },
      showSecrete_a(item){
        this.text = '确定将该创意设为私密吗？该创意将不会在创意社区显示。若当前为待审核状态，将从审核队列中移除该创意。'
        this.toHandleEvent = 'setSecrete'
        this.creativeObj = item
        this.dialog = true
      },
      showSecrete_b(item){
        this.text = '该创意将恢复到未发布创意列表中。'
        this.toHandleEvent = 'setRecovery'
        this.creativeObj = item
        this.dialog = true
      },
      secrete(item){
        item.statement = '未发布'
        request.post('/creative/manageCreative', item).then(res => {
          if (res.code === '200'){
            this.successTip('该创意已转移至未发布创意列表')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      },
      recovery(item) {
        item.statement = '未发布'
        request.post('/creative/recoveryCreative', item).then(res => {
          if (res.code === '200'){
            this.successTip('该创意已转移至未发布创意列表')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      },
      edit(item){
        request.get('/creative/' + item.id).then(res => {
          if (res.code !== '200' || res.data.statement === '回收'){
            this.sendWarnMessage('创意状态异常，暂不支持编辑')
            this.load()
          }
          else {
            sessionStorage.setItem('creative',window.btoa(window.encodeURIComponent(JSON.stringify(item.id))))
            this.$router.push('/idea_submission')
          }
        })
      },
      handle(){
        if (this.toHandleEvent === 'setSecrete')
          this.secrete(this.creativeObj)
        else if (this.toHandleEvent === 'toFakeDelete')
          this.fakeDelete(this.creativeObj)
        else if (this.toHandleEvent === 'upload')
          this.upload(this.creativeObj)
        else if (this.toHandleEvent === 'toRealDelete')
          this.realDelete(this.creativeObj)
        else if (this.toHandleEvent === 'setRecovery')
          this.recovery(this.creativeObj)
        this.dialog = false
      },
      showFakeDelete(item){
        this.text = '确定回收该创意吗？'
        this.toHandleEvent = 'toFakeDelete'
        this.creativeObj = item
        this.dialog = true
      },
      fakeDelete(item){
        item.statement = '回收'
        request.post('/creative/manageCreative', item).then(res => {
          if (res.code === '200'){
            this.successTip('创意删除成功，可在回收站中查看')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      },
      showRealDelete(item){
        this.text = '确定彻底删除该创意吗？与该创意相关的所有数据将彻底抹除（强烈不建议！）。'
        this.toHandleEvent = 'toRealDelete'
        this.creativeObj = item
        this.dialog = true
      },
      realDelete(item){
        request.delete('/creative/' + item.id).then(res => {
          if (res.code === '200'){
            this.successTip('删除成功')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      }
    }
  }
</script>

<style>
  .basil {
    background-color: #F2F2E6 !important;
  }
  .basil--text {
    color: #89B8CA !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  .ant-modal-body{
    padding-bottom: 5px !important;
  }

</style>
